<div class="col-sm-10">

    <div class="page-header" style="margin-top: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 15px;">
        <h2 style="margin: 0px">员工管理 / 实习员工</h2>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <!--搜索栏-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header" style="width: 98%;">
                            <form class="navbar-form navbar-left" style="width: 98%;">
                                <div class="form-group">
                                    搜索：
                                    <input id="search_input" type="text" class="form-control" placeholder="Search">
                                    <button class="btn btn-default" type="button" id="search_btn">查询</button>
                                </div>
                                <div class="form-group" style="float: right;">
<!--                                    <button class="btn btn-info" type="button" id="test1_btn">测试按钮1</button>-->
<!--                                    <button class="btn btn-info" type="button" id="test2_btn">测试按钮2</button>-->
                                    <button class="btn btn-success" type="button" id="emp_add_btn">新增员工信息</button>

                                </div>

                            </form>

                        </div>
                    </div>
                </nav>
            </div>

            <!--添加按钮-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-2">
                <!--表格-->
                <table id="employee_curd_table" class="table table-hover table-bordered table-striped">
                    <caption></caption>
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="employee_check_all">
                        </th>
                        <th>id</th>
                        <th>员工姓名</th>
                        <th>身份证</th>
                        <th>生日</th>
                        <th>性别</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

            </div>
        </div>
        <div class="row">
            <div id="page_info" class="col-md-4 text-center">
                <p>当前页:&nbsp;&nbsp;页显示量:&nbsp;&nbsp;总页数:&nbsp;&nbsp;总数据量:</p>
            </div>
            <div class="col-md-offset-2 col-md-6">
                <nav aria-label="Page navigation">
                    <ul id="page_nav" class="pager">
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    // let totalRecords;
    //定义一些全局变量
    // let errInputClass = "has-error";
    //加载页面后进行的操作
    $(function () {
        startWaiting();
        //初始化页面
        init_page();
        //绑定按钮点击事件
        bindOnEvent();
        checkIsFinish();
    });

    /**
     * 该方法用于开始等待页面数据填充
     */
    function startWaiting(){
        //弹出等待模态框
        $('#wait_modal').modal({
            show: true,
            backdrop: 'static'
        });
    }

    /**
     * 该方法用于循环等待并判断是否已结束了页面加载，若是则结束，若否则继续等待
     */
    function checkIsFinish(){
        let intervalID = setInterval(function () {
            console.log("持续等待页面加载...");
            let to_page_finish = (sessionStorage.getItem("to_page_finish") === "true");
            let bindOnEvent_finish = (sessionStorage.getItem("bindOnEvent_finish") === "true");
            if (to_page_finish&&bindOnEvent_finish){//如果可以结束，则结束
                console.log("页面加载完成!");
                sessionStorage.removeItem("to_page_finish");
                sessionStorage.removeItem("bindOnEvent_finish");
                //关闭等待模态框
                $('#wait_modal').modal('hide');
                clearInterval(intervalID);//结束循环
            }
        },200);
    }

    //该方法用于初始时跳转到保留的页码
    function init_page() {
        //开始前先移除main里面的所有点击事件
        unbindAll();

        let nowPage = sessionStorage.getItem("nowInternshipPage");
        if (nowPage == null) {
            to_page(1);//发送跳转请求到员工表第1页
        } else {
            to_page(nowPage);//跳转到保留页
        }
    }

    /**
     * 该方法用于移除所有的点击事件
     */
    function unbindAll() {
        $("#main").find("*").each(function (index, item) {
            $(item).off();//移除点击事件
        });
        //注意！！！on和off要匹配成功后才能正确取消事件的委托！！！
        // $(document).off("click",".update_emp_btn");
        // $(document).off("click",".bind_once,.update_emp_btn");
    }

    //该方法用于跳转到页面并查询
    function to_page(pn) {
        sessionStorage.setItem("to_page_finish","false");
        $.ajax({
            url: internshipInterface,//非Rest
            data: "pn=" + pn,
            type: "GET",
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                // 构建员工表
                build_employee_table(result);
                // // 构建构建页数信息条
                build_page_info(result);
                // // 构建分页导航条
                build_employee_nav(result);
            },complete: function () {
                sessionStorage.setItem("to_page_finish","true");
            }
        });
    }

    //该方法用于构建员工数据表
    function build_employee_table(result) {
        let $employeeTable = $("#employee_curd_table tbody");
        $employeeTable.empty();//添加前需要先清空

        let employeeList = result.dataMap.pageInfo.list;//部门的信息表
        let tableSize = result.dataMap.pageInfo.pageSize;//数据表每行的数量
        let createNums = 0;//当前已创建数据行的数量

        //Jquery里的$.each()遍历中，index代表当前遍历的索引，item代表当前遍历的数据
        $.each(employeeList, function (index, item) {
            // showMsg = showMsg + index+":"+ item.id+":"+item.employee_name+"\n";
            let $checkbox = $("<input type='checkbox' class='employee_check_item'/>");//创建选框
            let $checkboxTd = $("<td></td>").append($checkbox);//创建选框格并加入选框
            let $employeeIdTd = $("<td></td>").append(item.id);//创建id格并加入id数据
            let $employee_nameTd = $("<td></td>").append(item.employee_name);//创建员工名格并加入员工名数据
            let $cardTd = $("<td></td>").append(item.id_card);//创建身份证格并加入身份证数据
            let $birthTd = $("<td></td>").append(item.birthday);//创建出生格并加入出生数据
            let genderStr = "未知";
            switch (item.gender) {
                case 1://男性
                    genderStr = "男";
                    break;
                case 2://女性
                    genderStr = "女";
                    break;
                default://未知性别
                    break;
            }
            let $genderTd = $("<td></td>").append(genderStr).val(item.gender);
            let $departmentTd = $("<td></td>").append(item.position);//创建部门格并加入部门数据
            let $positionTd = $("<td></td>").append(item.position);//创建职位格并加入职位数据
            let $updateBtn = $("<button class=\"btn btn-primary btn-sm update_emp_btn\" style='margin-right:10px;margin-top:3px;'>编辑</button>").val(item.id);
            let $admitBtn = $("<button class=\"btn btn-info btn-sm admit_internship_btn\" style='margin-right:10px;margin-top:3px;'>录用</button>").val(item.id);//该按钮加入员工id
            let $dropoutBtn = $("<button class=\"btn btn-warning btn-sm dropout_internship_btn\" style='margin-right:10px;margin-top:3px;'>淘汰</button>").val(item.id);
            let $operationTd = $("<td></td>").append($updateBtn).append($admitBtn).append($dropoutBtn);//创建操作格并加入操作按钮

            let $employeeTr = $("<tr></tr>")//创建员工数据行并加入各种数据格子
                .append($checkboxTd)
                .append($employeeIdTd)
                .append($employee_nameTd)
                .append($cardTd)
                .append($birthTd)
                .append($genderTd)
                .append($departmentTd)
                .append($positionTd)
                .append($operationTd);

            $employeeTable.append($employeeTr);//将数据行加入表格中
            createNums++;//已创建数据行的数量加1
        });

        //构造空数据行
        for (let i = createNums; i < tableSize; i++) {
            let $userTr = $("<tr></tr>");//创建用户数据行并加入各种数据格子
            for (let j = 0; j < 9; j++) {
                let $nullTd = $("<td>&nbsp;</td>");//创建选框
                $userTr.append($nullTd);//加入选框
            }
            $employeeTable.append($userTr);//将数据行加入表格中
        }
    }

    //该方法用于构建页数信息条
    function build_page_info(result) {
        let $pageInfo = $("#page_info");
        $pageInfo.empty();//先清空"页数信息条"里的信息

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        sessionStorage.setItem("nowPage", pageNum);
        sessionStorage.setItem("nowInternshipPage", pageNum);
        sessionStorage.setItem("totalRecords", total);

        let $pageInfoP = $("<span></span>").append(
            "当前页:" + pageNum + "&nbsp;&nbsp;" +
            "页显示量:" + pageSize + "&nbsp;&nbsp;" +
            "总页数:" + pages + "&nbsp;&nbsp;" +
            "总数据量:" + total);

        $pageInfo.append($pageInfoP);//再往"页数信息条"里添加信息
    }

    //该方法用于构建分页导航条
    function build_employee_nav(result) {
        let $navUl = $("#page_nav");//找到需要被添加的导航栏对象
        $navUl.empty();//添加前需要先清空

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        let isFirstPage = result.dataMap.pageInfo.isFirstPage;//是否是首页的标识
        let isLastPage = result.dataMap.pageInfo.isLastPage;//是否是尾页的标识
        let navigatepageNums = result.dataMap.pageInfo.navigatepageNums;//导航栏要显示的数字们

        let $firstPageLi = $("<li></li>").append(
            $("<a></a>").append("首页").attr("href", "#")
        );
        let $prePageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&laquo;")
                ).attr("href", "#")
            );

        let $nextPageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&raquo;")
                ).attr("href", "#")
            );
        let $lastPageLi = $("<li></li>").append(
            $("<a></a>").append("尾页").attr("href", "#")
        );

        //如果是首页，则有两个按钮不能点击
        if (isFirstPage) {
            $firstPageLi.addClass("disabled");//第一页li添加disabled的class
            $firstPageLi.find("a").removeAttr("href");//找到第一页li下的a标签并清除属性

            $prePageLi.addClass("disabled");//前一页li添加disabled的class
            $prePageLi.find("a").removeAttr("href");//找到前一页li下的a标签并清除href属性
        } else {
            $firstPageLi.click(function () {
                to_page(1);
            });
            $prePageLi.click(function () {
                to_page(pageNum - 1);
            });
        }

        //如果是尾页，则有两个按钮不能点击
        if (isLastPage) {
            $lastPageLi.addClass("disabled");//最后页li添加disabled的class
            $lastPageLi.find("a").removeAttr("href");//找到最后页li下的a标签并清除属性

            $nextPageLi.addClass("disabled");//后一页li添加disabled的class
            $nextPageLi.find("a").removeAttr("href");//找到后一页li下的a标签并清除href属性
        } else {
            $lastPageLi.click(function () {
                to_page(pages);
            });
            $nextPageLi.click(function () {
                to_page(pageNum + 1);
            });
        }

        //添加"首页"按钮
        $navUl.append($firstPageLi);
        //添加"上一页"按钮
        $navUl.append($prePageLi);
        //遍历添加所有要显示的页码
        $.each(navigatepageNums, function (index, item) {
            let $numLi = $("<li></li>").append(
                $("<a></a>").append(item).attr("href", "#")
            );
            //如果目前的页码真的与遍历页码相等
            if (pageNum == item) {
                $numLi.addClass("active");
                $numLi.empty();//清除里面能点击的a标签
                $numLi.append(
                    $("<span></span>").append(item).append(
                        $("<span></span>").addClass("sr-only")
                    )
                );
            }
            //设置显示的页码格子的点击事件
            $numLi.click(function () {
                to_page(item);
            });

            $navUl.append($numLi);//将每一个要显示的页码加入导航栏中
        });
        //添加"下一页"按钮
        $navUl.append($nextPageLi);
        //添加"尾页"按钮
        $navUl.append($lastPageLi);
    }

    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {
        sessionStorage.setItem("bindOnEvent_finish","false");
        //增加员工信息按钮
        $("#emp_add_btn").off("click").click(function () {
            $.ajax({//跳转到简历部分
                url: to_resume,
                type: "GET",
                beforeSend: function (XMLHttpRequest) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    $("#main").html(result);//加载网页
                },
                error: function () {
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //给各输入框添加焦点模糊事件
        let $employee_name_add_input = $("#employee_add_input");
        $employee_name_add_input.bind("input propertychange", function () {
            checkEmployeeForm();
        });


        //绑定测试的按钮的点击事件
        $("#test1_btn").off("click").click(function () {
            //弹出等待模态框
            $('#wait_modal').modal({
                show: true,
                backdrop: 'static'
            });
        });
        $("#test2_btn").off("click").click(function () {
            // $("#main").find("*").each(function (index, item) {
            //     $(item).css("background-color", "");
            // });
            //关闭等待模态框
            $('#wait_modal').modal('hide');
            alertUtil.message("你点击了'测试按钮2'");
        });

        //绑定添加用户的按钮的点击事件
        $("#employee_add_confirm").off("click").click(function () {
            //使用jq自带的序列化方法直接将表格中的数据取出
            let employee_Data = $("#add_employee_form").serialize();
            // alert(employee_Data);

            if (checkEmployeeForm()) {//如果检查表格成功checkDepartmentForm()
                $.ajax({
                    url: employeeInterface,
                    data: employeeData,
                    type: "POST",
                    beforeSend: function(XMLHttpRequest ) {
                        //在请求头部设置accessToken
                        XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                    },
                    //请求成功后的回调函数
                    //result是请求成功后返回的Json结果
                    success: function (result) {
                        //判断保存的状态，200为成功，400为失败
                        if (result.code == 200) {
                            //关闭模态框
                            $("#addEmployeeModal").modal("hide");
                            //来到最后一页
                            to_page(totalRecords);
                            //提示保存成功
                            alertUtil.message(result.msg, "success");
                        } else {
                            console.log(result);

                            // 查看是否有后端回传的详细错误提示
                            if (result.dataMap.fieldErrors != undefined) {
                                //将失败的提示显示到模态框上
                                showErrorToFrom(result);
                            } else {
                                // 关闭模态框
                                $("#addEmployeeModal").modal("hide");
                                //提示保存失败
                                alertUtil.message(result.msg, "danger");
                            }
                        }
                    }
                });
            }
        })

        //绑定全选框的点击事件
        $("#employee_check_all").off("click").click(function () {
            //用.prop()函数来获取或修改dom原生的属性
            let nowCheckAll = $(this).prop("checked");
            $(".employee_check_item").prop("checked", nowCheckAll);
        });

        //绑定单行数据选框的点击事件 ( on(事件,选择器,方法) 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素)
        $(document).off("click", ".employee_check_item").on("click", ".employee_check_item", function () {
            //选中的数量和全部可选中的数量是否相等的标识
            let isCheckAll = $(".employee_check_item:checked").length == $(".employee_check_item").length;
            $("#employee_check_all").prop("checked", isCheckAll);
            console.log("触发单行数据选框的点击事件");
        });

        //绑定单行编辑按钮的点击事件
        $(document).off("click", ".update_emp_btn").on("click", ".update_emp_btn", function () {//旧绑定事件的方法
        // $(".update_emp_btn").click(  function () {//新绑定事件的方法（无效）
            // $(".update_emp_btn").css("background-color", "#d52323").off("click");
            let empID = $(this).val();
            // alertUtil.message("empID:"+empID,"info");
            sessionStorage.setItem("empID", empID);
            sessionStorage.setItem("testNum1", "1");
            // $(this).off("click");
            $.ajax({//跳转到简历部分
                url: to_resume,
                type: "GET",
                beforeSend: function (XMLHttpRequest) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    $("#main").html(result);//加载网页
                },
                error: function () {
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //绑定单行录取按钮的点击事件
        $(document).off("click", ".admit_internship_btn").on("click", ".admit_internship_btn", function () {
            let id = $(this).val();
            let empName = $(this).parents("tr").find("td:eq(2)").text();
            // alertUtil.message("已录取员工<strong>["+empName+"]</strong>", "success");

            $.ajax({
                url: internshipInterface + "?id=" + id,
                // data: "id=" + id,
                type: "PUT",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    //判断保存的状态，200为成功，400为失败
                    if (result.code == 200) {
                        //来到当前页
                        to_page(sessionStorage.getItem("nowPage"));
                        //提示保存成功
                        alertUtil.message("录取员工<strong>[" + empName + "]</strong>成功！", "success");
                    } else {
                        //提示保存失败
                        alertUtil.message("录取员工失败！", "danger");
                    }
                }, error: function () {
                    //提示保存失败
                    alertUtil.message("服务器后端未响应！", "danger");
                }
            });
        });

        //绑定单行数据选框的点击事件 ( on(事件,选择器,方法) 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素)
        $(document).off("click", ".dropout_internship_btn").on("click", ".dropout_internship_btn", function () {
            let id = $(this).val();
            let empName = $(this).parents("tr").find("td:eq(2)").text();
            // alertUtil.message("你要淘汰的员工是："+empName);
            $.ajax({
                url: internshipInterface + "?id=" + id,
                data: "id=" + id,
                type: "DELETE",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    //判断保存的状态，200为成功，400为失败
                    if (result.code == 200) {
                        //来到当前页
                        to_page(sessionStorage.getItem("nowPage"));
                        //提示保存成功
                        alertUtil.message("淘汰员工<strong>[" + empName + "]</strong>成功", "success");
                    } else {
                        //提示保存失败
                        alertUtil.message("淘汰员工失败！", "danger");
                    }
                }, error: function () {
                    //提示保存失败
                    alertUtil.message("服务器后端未响应！", "danger");
                }
            });
        });
        sessionStorage.setItem("bindOnEvent_finish","true");
    }
</script>